import React from "react";
import { useAuth } from "context/auth-context";
import { Form, Input } from "antd";
import { LongButton } from "./index";
import { useAsync } from "../utils/use-async";

export const LoginScreen = ({ onError }: { onError: (error: Error) => void }) => {
  const { login } = useAuth();

  const {run, isLoading} = useAsync(undefined, {throwOnError: true})


  const handleSubmit = async (values: { username: string, password: string }) => {
    try {
      await run(login(values))
    } catch (e) {
      onError(e);
    }
  };
  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name={"username"} rules={[{ required: true, message: "请输入用户名" }]}>
        <Input placeholder={"用户名"} type="text" id={"username"}/>
      </Form.Item>
      <Form.Item name={"password"} rules={[{ required: true, message: "请输入密码" }]}>
        <Input placeholder={"密码"} type="password" id={"password"}/>
      </Form.Item>
      <Form.Item>
        <LongButton loading={isLoading} htmlType={"submit"} type={"primary"}>登录</LongButton>
      </Form.Item>
    </Form>
  );
};
